let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html
module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000, // 端口号
    progress: true, // 进度条
    contentBase: './build' // 这个文件夹作为静态目录
  },
  mode: 'development', // 模式 默认两种 production development
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.[hash:8].js', // 打包后的文件名
    path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径
  },
  module: { // 模块
    rules: [ // 规则  css-loader 主要解析 @import 这种语法
      // style-loader 是把css 插入到head的标签中 
      // loader 的特点  单一
      // 用法  字符串 只用一个loader
      // 多个loader 需要[] ['style-loader', 'css-loader']
      // loader的顺序  默认从右向左执行
      // loader 还可以写成对象 方式 [{}] 好处可以传参数
      {
        // 可以处理less文件  sass  stylus
        test: /\.css$/, 
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top'  // 插入到style标签顶部
            }
          }, 
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top'  // 插入到head标签顶部
            }
          }, 
          'css-loader',
          'less-loader' // less-loader 调用less 来解析
        ] 
      }
    ]
  },
  plugins: [ // 插件
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板
      filename: 'index.html', // 打包后文件
      minify: {
        removeAttributeQuotes: true, // 删除双引号
        collapseWhitespace: true, // 折叠成一行
      },
      hash: true // 生成hash戳
    })
  ]
}